<!DOCTYPE html>
<html>
<head>
	<title>Custom HTML in fotorama</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">

	<!-- jQuery, -->
	<script src="jquery/jquery-1.9.1.min.js"></script>

	<!-- Fotorama -->
	<link  href="../out/fotorama.css" rel="stylesheet">
	<script src="../out/fotorama.js"></script>

	<!-- Just don’t want to repeat this prefix in every img[src] -->
	<base href="i/okonechnikov/">

  <script type="text/javascript">
    $(function () {

    });
  </script>
</head>

<body>

<p>Custom HTML:<p>
<pre style="margin-top: -1em; margin-left: 1em;"><code>&lt;div class="fotorama">
  <mark>&lt;div class="any">One&lt;/div></mark>
&lt;/div></code></pre>

<!-- Style for custom HTML -->
<style type="text/css">
	.fotorama .any {
		text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
		font-family: Georgia, serif;
		font-size: 72px;
		text-align: center;
		height: 181px;
		padding-top: 100px;
	}
</style>

<!-- Fotorama -->
<div class="fotorama" data-width="500" data-height="281" data-max-width="100%">
  <div class="any">1</div>
  <div class="any">2</div>
  <div class="any">3</div>
  <div class="any">4</div>
  <div class="any">5</div>
  <div class="any">6</div>
  <div class="any">7</div>
  <div class="any">8</div>
  <div class="any">9</div>
  <div class="any">10</div>
  <div class="any">11</div>
  <div class="any">12</div>
  <div class="any">13</div>
  <div class="any">14</div>
  <div class="any">15</div>
  <div class="any">16</div>
  <div class="any">17</div>
  <div class="any">18</div>
  <div class="any">19</div>
  <div class="any">20</div>
  <div class="any">21</div>
  <div class="any">22</div>
  <div class="any">23</div>
  <div class="any">24</div>
  <div class="any">25</div>
  <div class="any">26</div>
  <div class="any">27</div>
  <div class="any">28</div>
  <div class="any">29</div>
  <div class="any">30</div>
  <div class="any">31</div>
  <div class="any">32</div>
  <div class="any">33</div>
  <div class="any">34</div>
  <div class="any">35</div>
  <div class="any">36</div>
  <div class="any">37</div>
  <div class="any">38</div>
  <div class="any">39</div>
  <div class="any">40</div>
  <div class="any">41</div>
  <div class="any">42</div>
  <div class="any">43</div>
  <div class="any">44</div>
  <div class="any">45</div>
  <div class="any">46</div>
  <div class="any">47</div>
  <div class="any">48</div>
  <div class="any">49</div>
  <div class="any">50</div>
  <div class="any">51</div>
  <div class="any">52</div>
  <div class="any">53</div>
  <div class="any">54</div>
  <div class="any">55</div>
  <div class="any">56</div>
  <div class="any">57</div>
  <div class="any">58</div>
  <div class="any">59</div>
  <div class="any">60</div>
  <div class="any">61</div>
  <div class="any">62</div>
  <div class="any">63</div>
  <div class="any">64</div>
  <div class="any">65</div>
  <div class="any">66</div>
  <div class="any">67</div>
  <div class="any">68</div>
  <div class="any">69</div>
  <div class="any">70</div>
  <div class="any">71</div>
  <div class="any">72</div>
  <div class="any">73</div>
  <div class="any">74</div>
  <div class="any">75</div>
  <div class="any">76</div>
  <div class="any">77</div>
  <div class="any">78</div>
  <div class="any">79</div>
  <div class="any">80</div>
  <div class="any">81</div>
  <div class="any">82</div>
  <div class="any">83</div>
  <div class="any">84</div>
  <div class="any">85</div>
  <div class="any">86</div>
  <div class="any">87</div>
  <div class="any">88</div>
  <div class="any">89</div>
  <div class="any">90</div>
  <div class="any">91</div>
  <div class="any">92</div>
  <div class="any">93</div>
  <div class="any">94</div>
  <div class="any">95</div>
  <div class="any">96</div>
  <div class="any">97</div>
  <div class="any">98</div>
  <div class="any">99</div>
  <div class="any">100</div>
</div>

</body>
</html>